Skip to content

🚸 app: increase icon button hit areas#946

Open
dieguezguille wants to merge 2 commits intomainfrom
buttons
Open

🚸 app: increase icon button hit areas#946
dieguezguille wants to merge 2 commits intomainfrom
buttons

Conversation

@dieguezguille
Copy link
Copy Markdown
Member

@dieguezguille dieguezguille commented Apr 8, 2026

closes #900

Summary by CodeRabbit

  • New Features

    • Added a reusable IconButton for consistent icon appearance and touch behavior.
  • Refactor

    • Replaced many legacy pressable icon controls with IconButton for uniform UI and interaction.
    • Added localized aria-labels on icon controls to improve accessibility.
  • Localization

    • Added "Available funding info" and "Dismiss" translations for Spanish and Portuguese.

Open with Devin

@dieguezguille dieguezguille self-assigned this Apr 8, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 8, 2026

🦋 Changeset detected

Latest commit: 722f5fb

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 8, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: d7786012-4a8f-4139-ab93-526ce340a8e8

📥 Commits

Reviewing files that changed from the base of the PR and between 52c2419 and 722f5fb.

📒 Files selected for processing (51)
  • .changeset/four-colts-rhyme.md
  • src/components/activity/details/ActivityDetails.tsx
  • src/components/add-funds/AddCrypto.tsx
  • src/components/add-funds/AddFunds.tsx
  • src/components/add-funds/Bridge.tsx
  • src/components/add-funds/Fees.tsx
  • src/components/add-funds/KYC.tsx
  • src/components/add-funds/Onboard.tsx
  • src/components/add-funds/Ramp.tsx
  • src/components/auth/Passkeys.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/card/Card.tsx
  • src/components/card/CardDisclaimer.tsx
  • src/components/card/DismissableAlert.tsx
  • src/components/card/VerificationFailure.tsx
  • src/components/defi/ConnectionSheet.tsx
  • src/components/defi/DeFi.tsx
  • src/components/defi/IntroSheet.tsx
  • src/components/getting-started/GettingStarted.tsx
  • src/components/home/CreditLimitSheet.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PayModeSheet.tsx
  • src/components/home/Portfolio.tsx
  • src/components/home/SpendingLimitSheet.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/home/card-upgrade/CardUpgradeSheet.tsx
  • src/components/loans/Amount.tsx
  • src/components/loans/Asset.tsx
  • src/components/loans/Installments.tsx
  • src/components/loans/Loans.tsx
  • src/components/loans/Maturity.tsx
  • src/components/loans/Receiver.tsx
  • src/components/loans/Review.tsx
  • src/components/pay/Pay.tsx
  • src/components/pay/PaymentSheet.tsx
  • src/components/pay/Repay.tsx
  • src/components/roll-debt/RollDebt.tsx
  • src/components/send-funds/Amount.tsx
  • src/components/send-funds/QR.tsx
  • src/components/send-funds/Receiver.tsx
  • src/components/settings/Settings.tsx
  • src/components/shared/Failure.tsx
  • src/components/shared/Pending.tsx
  • src/components/shared/ProfileHeader.tsx
  • src/components/shared/Success.tsx
  • src/components/swaps/Failure.tsx
  • src/components/swaps/Pending.tsx
  • src/components/swaps/Success.tsx
  • src/components/swaps/Swaps.tsx
  • src/i18n/es.json
  • src/i18n/pt.json

Walkthrough

Adds a new shared IconButton component and replaces numerous Pressable‑wrapped icon controls across the app with IconButton instances, preserving existing handlers and navigation logic. Also adds two changeset files and two i18n entries.

Changes

Cohort / File(s) Summary
Changeset Files
\.changeset/four-colts-rhyme.md, \.changeset/petite-taxes-do.md
Add patch release notes for @exactly/mobile announcing the icon button change.
New Shared Component
src/components/shared/IconButton.tsx
Add default-exported IconButton (props: icon, optional color/size, disabled) providing min touch target, press feedback, role/aria-disabled, and prop forwarding.
Global Pressable → IconButton Replacements
src/components/... (many files: activity/details/ActivityDetails.tsx, add-funds/*, card/*, home/*, pay/*, send-funds/*, loans/*, defi/*, swaps/*, shared/*, roll-debt/RollDebt.tsx)
Replace Pressable‑wrapped icons (back/help/close/toggle/info/copy) with IconButton, add aria-label via i18n where used, remove per-use hitSlop/inline sizing/color now handled by IconButton, preserve existing onPress/navigation logic.
Add‑Funds / Activity Focus
src/components/add-funds/..., src/components/activity/details/ActivityDetails.tsx
Back/help/close controls migrated to IconButton across add‑funds flows and ActivityDetails; navigation and handlers retained.
Shared UI & Sheets
src/components/shared/*, src/components/home/*, src/components/card/*, src/components/defi/*
Modal headers, sheet close controls, profile header, and shared success/failure/pending components switched to IconButton; imports and i18n usage updated.
i18n Additions
src/i18n/es.json, src/i18n/pt.json
Add translations for Available funding info and Dismiss in Spanish and Portuguese.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User as User
participant IconButton as IconButton
participant Router as Router
participant QueryClient as QueryClient
Note over User,IconButton: User taps an icon rendered via IconButton
User->>IconButton: tap
IconButton->>QueryClient: optional query mutate/clear (where callers perform it)
IconButton->>Router: components may call router.canGoBack()
alt can go back
Router->>Router: router.back()
else cannot go back
Router->>Router: router.replace(...)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • cruzdanilo
  • franm91
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: creating a new IconButton component and replacing Pressable icons throughout the app to increase hit areas.
Linked Issues check ✅ Passed The PR successfully addresses issue #900 by creating an IconButton component with enforced minimum touch targets (minWidth/minHeight of 48) and replacing Pressable-wrapped icons across 50+ files.
Out of Scope Changes check ✅ Passed Changes include icon button implementations, i18n updates for new labels, and component refactoring—all directly related to increasing icon button hit areas as per issue #900.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch buttons

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@sentry
Copy link
Copy Markdown

sentry bot commented Apr 8, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71.74%. Comparing base (e6efb1b) to head (722f5fb).
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #946      +/-   ##
==========================================
+ Coverage   71.69%   71.74%   +0.05%     
==========================================
  Files         228      229       +1     
  Lines        8277     8285       +8     
  Branches     2661     2663       +2     
==========================================
+ Hits         5934     5944      +10     
+ Misses       2113     2112       -1     
+ Partials      230      229       -1     
Flag Coverage Δ
e2e 71.74% <100.00%> (+0.05%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

gemini-code-assist[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

@dieguezguille dieguezguille marked this pull request as ready for review April 9, 2026 18:17
sentry[bot]

This comment was marked as resolved.

devin-ai-integration[bot]

This comment was marked as resolved.

chatgpt-codex-connector[bot]

This comment was marked as resolved.

sentry[bot]

This comment was marked as resolved.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
src/components/shared/IconButton.tsx (1)

32-32: 🧹 Nitpick | 🔵 Trivial

Consider preventing interactions when disabled.

The disabled variant correctly applies visual styles (opacity/cursor), but the button remains interactive—pressStyle still triggers and press events can still fire. Adding pointerEvents: "none" would prevent unintended interactions.

♻️ Proposed enhancement
-  variants: { disabled: { true: { opacity: 0.5, cursor: "default" } } } as const,
+  variants: { disabled: { true: { opacity: 0.5, cursor: "default", pointerEvents: "none" } } } as const,

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5e9b5a8d-945a-4edb-a372-94dc7f197e04

📥 Commits

Reviewing files that changed from the base of the PR and between 0bfae9c and 52c2419.

📒 Files selected for processing (53)
  • .changeset/four-colts-rhyme.md
  • .changeset/petite-taxes-do.md
  • src/components/activity/details/ActivityDetails.tsx
  • src/components/add-funds/AddCrypto.tsx
  • src/components/add-funds/AddFunds.tsx
  • src/components/add-funds/Bridge.tsx
  • src/components/add-funds/Fees.tsx
  • src/components/add-funds/KYC.tsx
  • src/components/add-funds/Onboard.tsx
  • src/components/add-funds/Ramp.tsx
  • src/components/auth/Passkeys.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/card/Card.tsx
  • src/components/card/CardDisclaimer.tsx
  • src/components/card/DismissableAlert.tsx
  • src/components/card/VerificationFailure.tsx
  • src/components/defi/ConnectionSheet.tsx
  • src/components/defi/DeFi.tsx
  • src/components/defi/IntroSheet.tsx
  • src/components/getting-started/GettingStarted.tsx
  • src/components/home/CreditLimitSheet.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PayModeSheet.tsx
  • src/components/home/Portfolio.tsx
  • src/components/home/SpendingLimitSheet.tsx
  • src/components/home/VisaSignatureSheet.tsx
  • src/components/home/card-upgrade/CardUpgradeSheet.tsx
  • src/components/loans/Amount.tsx
  • src/components/loans/Asset.tsx
  • src/components/loans/Installments.tsx
  • src/components/loans/Loans.tsx
  • src/components/loans/Maturity.tsx
  • src/components/loans/Receiver.tsx
  • src/components/loans/Review.tsx
  • src/components/pay/Pay.tsx
  • src/components/pay/PaymentSheet.tsx
  • src/components/pay/Repay.tsx
  • src/components/roll-debt/RollDebt.tsx
  • src/components/send-funds/Amount.tsx
  • src/components/send-funds/QR.tsx
  • src/components/send-funds/Receiver.tsx
  • src/components/settings/Settings.tsx
  • src/components/shared/Failure.tsx
  • src/components/shared/IconButton.tsx
  • src/components/shared/Pending.tsx
  • src/components/shared/ProfileHeader.tsx
  • src/components/shared/Success.tsx
  • src/components/swaps/Failure.tsx
  • src/components/swaps/Pending.tsx
  • src/components/swaps/Success.tsx
  • src/components/swaps/Swaps.tsx
  • src/i18n/es.json
  • src/i18n/pt.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

app: increase icon button hit areas

1 participant